<template>
  <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="visible" width="1700px" @close="!visible" top="8vh">
    <div style="height: 70vh; overflow-y: auto;">
      <div style="height: 60px; border-bottom: 1px solid #b0bde2">
        <el-checkbox v-model="index1">月奖</el-checkbox>
        <el-checkbox v-model="index2">总经理嘉奖</el-checkbox>
        <el-checkbox v-model="index3">绩效奖</el-checkbox>
        <el-checkbox v-model="index4">季度奖</el-checkbox>
        <el-checkbox v-model="index5">劳动竞赛奖</el-checkbox>
      </div>
      <div class="mt10">
        <el-button type="primary">导入</el-button>
        <el-button type="primary">公式调整</el-button>
        <el-button type="primary">员工调整</el-button>
        <el-button type="primary">分配测算</el-button>
        <el-button type="primary">保存</el-button>
        <el-button type="primary">提交</el-button>
      </div>
      <el-table :data="tableData" class="mt10" style="width: 99%">
        <el-table-column type="index" width="80" header-align="center" align="center" label="序号"></el-table-column>

        <el-table-column prop="code" label="员工编号" min-width="120" header-align="center" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" min-width="120" header-align="center" align="center"></el-table-column>
        <el-table-column prop="fzxx" label="分组信息" min-width="120" header-align="center" align="center"></el-table-column>
        <el-table-column prop="yj" label="月奖" min-width="120" header-align="center" align="center" v-if="index1"></el-table-column>

        <el-table-column label="总经理奖金" header-align="center" align="center" v-if="index2">
          <el-table-column prop="zjyd" label="应得奖金" min-width="120" header-align="center" align="center"></el-table-column>
          <el-table-column prop="zjjk" label="加扣奖" min-width="120" header-align="center" align="center">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top" v-if="scope.row.zjjk > 0">
                <p>人才规划嘉奖{{ scope.row.rcgh }}元</p>
                <p>微视频嘉奖{{ scope.row.wsp }}元</p>
                <div slot="reference" class="name-wrapper">
                  <span>{{ scope.row.zjjk }}</span>
                </div>
              </el-popover>
              <span v-else>{{ scope.row.zjjk }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="zjsd" label="实得奖金" min-width="120" header-align="center" align="center"></el-table-column>
        </el-table-column>
        <el-table-column label="绩效奖金" header-align="center" align="center" v-if="index3">
          <el-table-column prop="jxyd" label="应得奖金" min-width="120" header-align="center" align="center"></el-table-column>
          <el-table-column prop="jxjk" label="加扣奖" min-width="120" header-align="center" align="center"></el-table-column>
          <el-table-column prop="jxsd" label="实得奖金" min-width="120" header-align="center" align="center"></el-table-column>
        </el-table-column>
        <el-table-column label="季度奖金" header-align="center" align="center" v-if="index4">
          <el-table-column prop="jdyd" label="应得奖金" min-width="120" header-align="center" align="center"></el-table-column>
          <el-table-column prop="jdjk" label="加扣奖" min-width="120" header-align="center" align="center"></el-table-column>
          <el-table-column prop="jdsd" label="实得奖金" min-width="120" header-align="center" align="center"></el-table-column>
        </el-table-column>
        <el-table-column label="劳动竞赛奖" header-align="center" align="center" v-if="index5">
          <el-table-column prop="ldyd" label="应得奖金" min-width="120" header-align="center" align="center"></el-table-column>
          <el-table-column prop="ldjk" label="加扣奖" min-width="120" header-align="center" align="center"></el-table-column>
          <el-table-column prop="ldsd" label="实得奖金" min-width="120" header-align="center" align="center"></el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      title: '员工分配',
      visible: false,
      index1: true,
      index2: true,
      index3: true,
      index4: true,
      index5: true,
      tableData: [
        {
          code: "20210801",
          name: "张伟",
          fzxx: "分组一",
          yj: "1000",
          zjyd: "20000",
          zjjk: "2000",
          rcgh: "1000",
          wsp: "1000",
          zjsd: "22000",
          jxyd: "20000",
          jxjk: "0",
          jxsd: "20000",
          jdyd: "20000",
          jdjk: "0",
          jdsd: "20000",
          ldyd: "20000",
          ldjk: "0",
          ldsd: "20000",
        },
        {
          code: "20210802",
          name: "刘涛",
          fzxx: "分组一",
          yj: "1000",
          zjyd: "20000",
          zjjk: "0",
          rcgh: "0",
          wsp: "0",
          zjsd: "20000",
          jxyd: "20000",
          jxjk: "0",
          jxsd: "20000",
          jdyd: "20000",
          jdjk: "0",
          jdsd: "20000",
          ldyd: "20000",
          ldjk: "0",
          ldsd: "20000",
        },
        {
          code: "20210803",
          name: "赵智",
          fzxx: "分组一",
          yj: "1000",
          zjyd: "20000",
          zjjk: "0",
          rcgh: "0",
          wsp: "0",
          zjsd: "20000",
          jxyd: "20000",
          jxjk: "0",
          jxsd: "20000",
          jdyd: "20000",
          jdjk: "0",
          jdsd: "20000",
          ldyd: "20000",
          ldjk: "0",
          ldsd: "20000",
        },
        {
          code: "20210804",
          name: "刘伟",
          fzxx: "分组一",
          yj: "1000",
          zjyd: "20000",
          zjjk: "0",
          rcgh: "0",
          wsp: "0",
          zjsd: "20000",
          jxyd: "20000",
          jxjk: "0",
          jxsd: "20000",
          jdyd: "20000",
          jdjk: "0",
          jdsd: "20000",
          ldyd: "20000",
          ldjk: "0",
          ldsd: "20000",
        },
        {
          code: "20210805",
          name: "孙国中",
          fzxx: "分组二",
          yj: "1000",
          zjyd: "20000",
          zjjk: "0",
          rcgh: "0",
          wsp: "0",
          zjsd: "20000",
          jxyd: "20000",
          jxjk: "0",
          jxsd: "20000",
          jdyd: "20000",
          jdjk: "0",
          jdsd: "20000",
          ldyd: "20000",
          ldjk: "0",
          ldsd: "20000",
        },
        {
          code: "20210806",
          name: "李为重",
          fzxx: "分组二",
          yj: "1000",
          zjyd: "20000",
          zjjk: "0",
          rcgh: "0",
          wsp: "0",
          zjsd: "20000",
          jxyd: "20000",
          jxjk: "0",
          jxsd: "20000",
          jdyd: "20000",
          jdjk: "0",
          jdsd: "20000",
          ldyd: "20000",
          ldjk: "0",
          ldsd: "20000",
        },
        {
          code: "20210807",
          name: "周通",
          fzxx: "分组二",
          yj: "1000",
          zjyd: "20000",
          zjjk: "0",
          rcgh: "0",
          wsp: "0",
          zjsd: "20000",
          jxyd: "20000",
          jxjk: "0",
          jxsd: "20000",
          jdyd: "20000",
          jdjk: "0",
          jdsd: "20000",
          ldyd: "20000",
          ldjk: "0",
          ldsd: "20000",
        },
        {
          code: "20210808",
          name: "池中国",
          fzxx: "分组三",
          yj: "1000",
          zjyd: "20000",
          zjjk: "0",
          rcgh: "0",
          wsp: "0",
          zjsd: "20000",
          jxyd: "20000",
          jxjk: "0",
          jxsd: "20000",
          jdyd: "20000",
          jdjk: "0",
          jdsd: "20000",
          ldyd: "20000",
          ldjk: "0",
          ldsd: "20000",
        },
        {
          code: "20210809",
          name: "陈洋",
          fzxx: "分组三",
          yj: "1000",
          zjyd: "20000",
          zjjk: "0",
          rcgh: "0",
          wsp: "0",
          zjsd: "20000",
          jxyd: "20000",
          jxjk: "0",
          jxsd: "20000",
          jdyd: "20000",
          jdjk: "0",
          jdsd: "20000",
          ldyd: "20000",
          ldjk: "0",
          ldsd: "20000",
        },
        {
          code: "20210810",
          name: "陈金刚",
          fzxx: "分组三",
          yj: "1000",
          zjyd: "20000",
          zjjk: "0",
          rcgh: "0",
          wsp: "0",
          zjsd: "20000",
          jxyd: "20000",
          jxjk: "0",
          jxsd: "20000",
          jdyd: "20000",
          jdjk: "0",
          jdsd: "20000",
          ldyd: "20000",
          ldjk: "0",
          ldsd: "20000",
        },
      ]
    }
  },
  methods: {
    initCreate() {
      this.visible = true;
    },
  }
}
</script>
